import React from "react";
import { Routes, Route, NavLink } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import One from "./pages/One";
import Two from "./pages/Two";
import Three from "./pages/Three";
import UserList from "./pages/UserList";

export default function App() {
  return (
    <div className="container">
      <nav>
        <NavLink to={"/"}>首页</NavLink>
        {/*search传递参数
                    to的值可以是字符串也可以是对象
                */}
        <NavLink to={'/one?a=1&b=2'}>ONE1</NavLink>
        <NavLink to={{
          pathname:'/one?a=10&b=20'
        }}>ONE2</NavLink>
        <NavLink to={{
          pathname: '/one',
          search:'a=100&b=200'
        }}>ONE3</NavLink>

        
        <NavLink to={"/one"}>ONE</NavLink>
        <NavLink to={"/two"}>TWO</NavLink>


        {/* params 传递参数    刷新数据不会丢失,灵活度会更高  传递对象不方便 */}
        {/*1*/}
        {/* <NavLink to={"/three/1/2"}>THREE</NavLink> */}
        {/* 2 */}
        {/* <NavLink to={"/three/1-3"}>THREE</NavLink> */}
        {/* 3 */}
        <NavLink to={"/three/1-4.php"}>THREE</NavLink>
        

        <NavLink to={'userList'}>用户列表(json-server)</NavLink>
        
      </nav>
      <Routes>
        <Route path={"/"} element={<Home />}>
          首页
        </Route>
        <Route path={"/one"} element={<One />}>
          ONE
        </Route>
        <Route path={"/two"} element={<Two />}>
          TWO
        </Route>



        {/*1*/}
        {/* <Route path={"/three/:a/:b"} element={<Three />}>
          THREE
        </Route> */}
        {/* 2 */}
        {/* <Route path={"/three/:a-:b"} element={<Three />}>THREE</Route>
      </Routes> */}
      {/* 3 */}
        <Route path={"/three/:a-:b.php"} element={<Three />}>THREE</Route>
      <Route path={"/UserList"} element={<UserList/>}>UserList</Route>
        
      </Routes>
    </div>
  );
}
